<%--

  @author yulezhisi
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>流失分析</title>

    <link rel="shortcut icon" href="<c:url value="/images/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/js/jquery-1.9.1.min.js"/>"></script>
    <script src="<c:url value="/layui/layui.js"/>"></script>
    <link rel="stylesheet" type="text/css" href="<c:url value="/layui/css/layui.css"/>">

    <script src="<c:url value="/js/my/commons.js"/>"></script>
    <style>
        .container {
            width: 1200px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="layui-row layui-form reload">
        <div class="layui-col-md5">
            客户名称：
            <div class="layui-inline">
                <input class="layui-input" name="customerName" id="byCustomerName" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <div class="demoTable layui-col-md5">
            客户经理：
            <div class="layui-inline">
                <select name="year" id="byCustomerManager">
                    <option value="">全部</option>
                    <c:forEach items="${sessionScope.normalList}" var="normal">
                        <option value="${normal.real_name}">${normal.real_name}</option>
                    </c:forEach>
                </select>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
    <br><br><br>

    <table class="layui-hide" id="contribution_table" lay-filter="user"></table>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            //方法级渲染
            table.render({
                elem: '#contribution_table'
                , url: '${pageContext.request.contextPath}/count/customerLoss.do'
                , where: {
                    status: 0
                }
                , page: true
                , cols: [[
                    {type: 'numbers', title: '编号', minWidth: 100, align: "center"},
                    {
                        field: 'lossDate', templet: '<div>{{d.lossDate.substring(0,4)}}</div>', title: '年份', align:
                            'center'
                    },
                    {field: 'name', templet: '<div>{{d.customer.name}}</div>', title: '客户', align: 'center'},
                    {
                        field: 'name',
                        templet: '<div>{{d.customer.normal.realName}}</div>',
                        title: '客户经理',
                        align: 'center',
                        minWidth: 150
                    },
                    {field: 'reason', title: '流失原因', minWidth: 100, align: "center", width: 238},

                ]]
                ,id:'forReload'
            });

            var $ = layui.$, active = {
                reload: function () {
                    let byCustomerName = $('#byCustomerName');
                    let byCustomerManager = $('#byCustomerManager');
                    //执行重载
                    table.reload('forReload', {
                        url: '${pageContext.request.contextPath}/customerLoss.do',
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            customerName: byCustomerName.val()
                            , customerManager: byCustomerManager.val()
                        }
                    }, 'data');
                }
            };

            $('.reload .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</div>

</body>
</html>
